import { View, Text } from '@tarojs/components'
import { ArrowRight } from '@nutui/icons-react-taro'
import React from 'react'
import './index.less'

export interface SectionHeaderProps {
  /** 标题 */
  title: string
  /** 是否显示"查看全部" */
  showViewAll?: boolean
  /** "查看全部"文字 */
  viewAllText?: string
  /** "查看全部"点击事件 */
  onViewAllClick?: () => void
  /** 右侧自定义内容 */
  extra?: React.ReactNode
  /** 自定义类名 */
  className?: string
}

/**
 * SectionHeader 区块标题组件
 * 用于展示页面各个区块的标题，支持"查看全部"功能
 */
const SectionHeader: React.FC<SectionHeaderProps> = ({
  title,
  showViewAll = false,
  viewAllText = '查看全部',
  onViewAllClick,
  extra,
  className = '',
}) => {
  return (
    <View className={`section-header ${className}`}>
      <Text className='section-title'>{title}</Text>
      {extra || (showViewAll && onViewAllClick && (
        <View className='view-all' onClick={onViewAllClick}>
          <Text className='view-all-text'>{viewAllText}</Text>
          <ArrowRight size={14} color='#52c41a' />
        </View>
      ))}
    </View>
  )
}

export default SectionHeader

